<template>
  <div class="container">
    <p style="position: absolute; left: 0; top: 0">{{ fps }}</p>
    <canvas
      ref="canvasRef"
      class="myCanvas"
      :width="canvasSize.width"
      :height="canvasSize.height"
    ></canvas>
  </div>
</template>
<script lang="tsx" setup>
import { useFps } from '@vueuse/core'
import CanvasKitInit, { Canvas, CanvasKit, Surface } from 'canvaskit-wasm'
import { onMounted, reactive, ref } from 'vue'

// import testImage from '@/assets/000.jpg'
// import { loadImageAsync } from '@/utils'

const fps = useFps()

const canvasRef = ref<HTMLCanvasElement>()
const canvasSize = reactive({
  width: 100,
  height: 200,
})
const setCanvasSize = () => {
  const width = canvasRef.value?.offsetWidth || document.body.offsetWidth
  const height = canvasRef.value?.offsetHeight || document.body.offsetHeight
  canvasSize.width = width
  canvasSize.height = height
}

let canvasKit: CanvasKit | null = null
let surface: Surface | null = null
const init = () => {
  CanvasKitInit({
    locateFile: (file) => {
      return `/node_modules/canvaskit-wasm/bin/${file}`
    },
  }).then(async (CanvasKit) => {
    if (!canvasRef.value) return
    canvasKit = CanvasKit
    surface = canvasKit.MakeWebGLCanvasSurface(canvasRef.value)
    // const canvas = surface?.getCanvas()!
    // canvas.getTotalMatrix()
    // const image = await loadImageAsync(testImage)
    // bgImage = canvasKit.MakeImageFromCanvasImageSource(image)
    // testDraw(canvas)
    // surface?.drawOnce((canvas) => {
    //   if (!bgImage) return
    //   const sx = bgImage.width() / canvasRef.value!.offsetWidth
    //   const sy = bgImage.height() / canvasRef.value!.offsetHeight
    //   scale.value = Math.min(1 / sx, 1 / sy)
    //   canvas.scale(scale.value, scale.value)
    //   if (!canvasRef.value) return
    //   const left = (canvasSize.width - bgImage.width() * scale.value) / 2
    //   const top = (canvasSize.height - bgImage.height() * scale.value) / 2
    //   drawImage(canvas, left, top)
    // })
    const paint = new canvasKit.Paint()
    paint.setColor(canvasKit.Color4f(0.9, 0, 0, 1.0)) // 设置红色
    paint.setStyle(canvasKit.PaintStyle.Fill) // 填充还是描边，这里选择描边
    paint.setStrokeWidth(2) // 线宽
    paint.setAntiAlias(true) // 抗锯齿
    const drawFrame = (canvas: Canvas) => {
      drawCircle(canvas, paint, 20000)
      surface?.requestAnimationFrame(drawFrame)
    }

    surface?.requestAnimationFrame(drawFrame)
  })
}

const drawCircle = (canvas: Canvas, paint, count: number) => {
  const rects = Array.from(new Array(count)).map(() => {
    return {
      x: Math.random() * canvasSize.width,
      y: Math.random() * canvasSize.height,
    }
  })
  for (let i = 0; i < rects.length; i++) {
    const centerX = rects[i].x
    const centerY = rects[i].y
    const radius = 5
    canvas.drawCircle(centerX, centerY, radius, paint)
  }
  console.timeEnd('drawCircle')
}
// const isDrawing = ref(false)
// const handleMouseDown = (event: MouseEvent) => {
//   console.log(event)
//   isDrawing.value = true
// }
// const handleMouseMove = (event: MouseEvent) => {
//   if (!isDrawing.value) return
//   console.log(event)
// }
// const handleMouseUp = (event: MouseEvent) => {
//   console.log(event)
//   isDrawing.value = false
// }

onMounted(() => {
  setCanvasSize()
  init()
})
</script>
<style lang="scss" scoped>
.container {
  width: 100%;
  height: calc(100vh - 60px - 50px - 40px);
  .myCanvas {
    width: 100%;
    height: 100%;
  }
}
</style>
